<template>
  <div class="root">
    <div class="bg">
      <div class="header-text">昇腾CANN技术开发环境搭建</div>
      <!-- 内容 -->
      <div class="content">
        <!-- 工单类型 -->
        <div class="work-order">
          <div class="work-l">工单类型</div>
          <div class="work-r">
            <div class="scelect">
              <div class="checkbox">
                <div class="checkbox-icon"></div>
              </div>
              <div class="text">开发工单</div>
            </div>
            <div class="scelect">
              <div class="checkbox"></div>
              <div class="text">测试工单</div>
            </div>
            <div class="scelect">
              <div class="checkbox"></div>
              <div class="text">返工工单</div>
            </div>
          </div>
        </div>
        <!-- 信息 -->
        <div class="message">
          <div class="lineOne">
            <div class="submit-date">
              <div class="text">提交日期</div>
              <input class="date-text" type="date" v-model="dataList.messageData.dateSubmission">
              <!-- <input class="date-text" type="date"> -->
            </div>
            <div class="totleTime">
              <div class="text">开发周期</div>
              <div class="date-input">
                <!-- <input class="dateStart" type="date"> - <input class="dateEnd" type="date"> -->
                <input class="dateStart" type="date" v-model="dataList.messageData.dateStart"> - <input class="dateEnd"
                  type="date" v-model="dataList.messageData.dateEnd">
              </div>
            </div>
          </div>

          <div class="lineTwo">
            <div class="submit-date">
              <div class="text">班级</div>
              <!-- <input class="date-text" type="text" placeholder="人工智能1班"> -->
              <input class="date-text" type="text" v-model="dataList.messageData.class">
            </div>
            <div class="totleTime">
              <div class="text">项目名称</div>
              <!-- <input class="input-text" type="text" placeholder="昇腾CANN技术开发"> -->
              <input class="input-text" type="text" v-model="dataList.messageData.projectName">
            </div>
          </div>

          <div class="lineThree">
            <div class="submit-date">
              <div class="text">项目组长</div>
              <!-- <input class="date-text" type="text" placeholder="李四"> -->
              <input class="date-text" type="text" v-model="dataList.messageData.projectLeader">
            </div>
            <div class="totleTime">
              <div class="text">团队成员</div>
              <!-- <input class="input-text" type="text" placeholder="小明，张三"> -->
              <input class="input-text" type="text" v-model="dataList.messageData.teamMember">
            </div>
          </div>
        </div>
        <!-- 项目需求 -->
        <div class="project-requirements">
          <div class="title">项目需求</div>
          <!-- <div class="content-text">
            <span class="font-weight">系统功能：</span>Linux下搭建仓颉程序开发环境，完成创建工程、编写代码、编译工程、运行测试等任务，为后续开发学生信息管理系统奠定基础。
          </div> -->
          <textarea class="content-text" name="" id=""></textarea>
        </div>
        <!-- 项目实施 -->
        <div class="project-implementation">
          <div class="title">项目实施</div>
          <div class="content-text">
            <!-- 基本要求 -->
            <div class="basic">
              <div class="basic-text">基本要求:</div>
              <div class="select-list">
                <span class="completed">完成</span>
                <span class="partiallyCompleted">部分完成</span>
                <span class="unCompleted">难以完成</span>
              </div>
            </div>
            <div class="item" v-for="(item, index) in dataList.projectActive.slice(0, 4) " :key="item.title">
              <div class="item-title">{{ item.title }}</div>
              <div class="select-list">
                <div class="select" v-for="(el, i) in item.dataList" @click="projectClick(item, el.index)">
                  <div class="select-icon" v-if="item.scelect === el.index"></div>
                </div>
              </div>
            </div>
            <!-- 附加要求 -->
            <div class="adjunction">
              <div class="adjunction-text">基本要求:</div>
            </div>
            <div class="item" v-for="(item, index) in dataList.projectActive.slice(4, 5) " :key="item.title">
              <div class="item-title">{{ item.title }}</div>
              <div class="select-list">
                <div class="select" v-for="(el, i) in item.dataList" @click="projectClick(item, el.index)">
                  <div class="select-icon" v-if="item.scelect === el.index"></div>
                </div>
              </div>
            </div>
            <!-- 自选扩展 -->
            <div class="optional">
              <div class="optional-text">自选扩展:</div>
            </div>
            <div class="item" v-for="(item, index) in dataList.projectActive.slice(5, 6) " :key="item.title">
              <div class="item-title">{{ item.title }}</div>
              <div class="select-list">
                <div class="select" v-for="(el, i) in item.dataList" @click="projectClick(item, el.index)">
                  <div class="select-icon" v-if="item.scelect === el.index"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 学习反思 -->
        <div class="study-reflection">
          <div class="title">学习反思</div>
          <!-- <div class="content-text">
            Linux下搭建仓颉程序开发环境，完成创建工程、编写代码、编译工程、运行测试等任务，为后续开发学生信息管理系统奠定基础。
          </div> -->
          <textarea class="content-text" name="" id=""></textarea>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="submit" @click="submitHandler">提交</div>
    </div>
    <div class="mask" v-if="mask" @click="handleMaskClick">
      <img class="images" :src="score >= 60 ? excellent : score >= 40 ? keepUp : continueImprove" alt="">
    </div>
  </div>

</template>

<style lang="less">
@import './app.less';
</style>

<script setup>
import { ref, onMounted, onUnmounted, reactive, computed, watch, nextTick } from 'vue';
import keepUp from '@/assets/images/keep-it-up.png';
import excellent from '@/assets/images/excellent.png';
import continueImprove from '@/assets/images/continue-improve.png';
const dataList = reactive({
  // 基本要求
  projectActive: [
    { title: '在Linux下搭建仓颉程序开发环境', scelect: '', dataList: [{ score: 10, index: '0' }, { score: 5, index: '1' }, { score: 1, index: '2' }] },
    { title: '在主目录project文件夹下，创建仓颉工程', scelect: '', dataList: [{ score: 10, index: '0' }, { score: 5, index: '1' }, { score: 1, index: '2' }] },
    { title: '概括集成开发环境的功能和作用:修改main.ci文件，将前述内容打印在终端窗口', dataList: [{ score: 10, index: '0' }, { score: 5, index: '1' }, { score: 1, index: '2' }] },
    { title: '概括编程语言和编译器之间的关系用;修改main.cj文件，将前述内容打印在终端窗口。', scelect: '', dataList: [{ score: 10, index: '0' }, { score: 5, index: '1' }, { score: 1, index: '2' }] },
    { title: '在Linux下搭建仓颉程序开发环境', scelect: '', dataList: [{ score: 10, index: '0' }, { score: 5, index: '1' }, { score: 1, index: '2' }] },
    { title: '在主目录project文件夹下，创建仓颉工程', scelect: '', dataList: [{ score: 10, index: '0' }, { score: 5, index: '1' }, { score: 1, index: '2' }] },
  ],
  // 信息收集
  messageData: {
    // 提交日期
    dateSubmission: '',
    dateStart: '',
    dateEnd: '',
    class: '',
    projectName: '',
    projectLeader: '',
    teamMember: '',
  }
})

const mask = ref(false);

/**
 * 
 * @param item 每一项
 * @param index 选择下标
 */
const projectClick = (item, index) => {
  item.scelect = index;
}

/**
 * 规则判断
 */
const ruleHandler = () => {
  const { dateSubmission, dateStart, dateEnd, class: className, projectName, projectLeader, teamMember } = dataList.messageData;

  const fields = [
    { field: dateSubmission, message: '请选择提交日期' },
    { field: dateStart, message: '请选择开始日期' },
    { field: dateEnd, message: '请选择结束日期' },
    { field: className, message: '请输入班级名称' },
    { field: projectName, message: '请输入项目名称' },
    { field: projectLeader, message: '请输入项目负责人' },
    { field: teamMember, message: '请输入团队成员' }
  ];

  const errors = fields
    .filter(field => !field.field)
    .map(field => field.message);

  if (errors.length > 0) {
    alert(errors.join('\n'));
    return false;
  } else {
    return true;
  }
};


/**
 * 计算分数
 */
const countScore = () => {
  const res = dataList.projectActive.every(item => item.scelect !== '')

  if (!res) return alert('请填完评分');
  const score = dataList.projectActive
    .map(item => item?.dataList[item.scelect]?.score)
    .reduce((pre, cur) => pre + cur);

  return score;
}

const score = ref(0);

/**
 * 提交表单
 */
const submitHandler = () => {
  console.log(dataList.messageData);
  // 判断规则
  if (!ruleHandler()) return
  // 评分
  score.value = countScore()
  console.log(score.value);
  if (score.value === 0 || !score.value) {
    mask.value = false
  } else
    mask.value = true
}


const handleMaskClick = (event) => {
  if (!event.target.closest('.images')) {
    mask.value = false;
  }
};

</script>
